<template>
  <div class="Swiper">
      <router-link to="galary" append>
   <swiper :options="swiperOption">
            
				<swiper-slide 
					v-for="item of swiperList"
					:key="item.id">
                    <div class="swiper-img">
				         <img class="t" :src="item.imgUrl"/>            
                     </div>  
                                   
                <div class="swiper-desc">
                    <span class="left">{{item.date}}</span>
                    <span class="middle">{{item.page}}张</span>
                    <span class="right">编号：{{item.number}}</span>
                </div>

         </swiper-slide>
      </swiper>
     </router-link>
  </div>
</template>

<script>
//	引入组件
	
		
//	定义输出组件name
export default {
  name: 'detailSwiper',
//注册组件
props:{
  swiperList:Array
},
data(){
    return{
        swiperOption:{
            loop:true
        },

    }
   
},


}
</script>


<style scoped>
.Swiper{
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    position: relative;
    background-color: #fff;
}
.swiper-img{
    width: 100%;
    height:245px;
}
.swiper-img img{
    width: 100%;
    height: 100%;
}
.swiper-desc{
    background-color: rgb(172, 172, 172);
    height: 19PX;
    width: 100%;
   position: absolute;
   bottom: 0px;
   display: flex;
   opacity: 0.8;

}
.left{
    float: left;
    color: black;
}
.middle{
    flex: 1;
    text-align:right;
    margin-right: 20px;
    color: black;
}
.right{
    float: right;
    color: black;
}
 


</style>
